<template>
  <div class="process">
    <div class="process-container">
      <el-tooltip
        v-for="(it, index) in items"
        :key="index"
        :content="`${index + 1}`"
        :popper-class="`process-popper color-${index}`"
        :style="`color: ${colors[index]};`"
        placement="top"
        effect="light"
      >
        <div
          :style="`background-color:${it.active ? colors[index] : '#fff'}`"
          :class="{active: it.active}"
          class="item"
          @click="toogle(index)"
        ></div>
      </el-tooltip>
    </div>
    <div class="face-container">
      <div :class="['face ', {active: current <= 2}]">
        <i class="icon-neutral2"></i>轻度
      </div>
      <div :class="['face ', {active2: current <= 5 && current >= 3}]">
        <i class="icon-sad2"></i>中度
      </div>
      <div :class="['face ', {active3: current <= 9 && current >= 6}]">
        <i class="icon-crying2"></i>重度
      </div>
    </div>
  </div>
</template>
<script>
const colors = [
  '#ffe5bf',
  '#ffcd84',
  '#ffb74f',
  '#ff9700',
  '#ff8400',
  '#ff7200',
  '#ff6000',
  '#ff3200',
  '#f10000',
  '#e10505'
];
export default {
  props: {
    levels: {
      type: Number,
      default: 10
    },
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      colors
    };
  },
  computed: {
    items() {
      return new Array(this.levels).fill(0).map((it, index) => ({
        active: index <= this.current
      }));
    }
  },
  methods: {
    toogle(index) {
      this.$emit('update:current', index);
    }
  }
};
</script>
<style lang="scss" scoped>
.face-container {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  .face {
    color: #999;
    i {
      margin-right: 5px;
    }
    &.active {
      color: #ffcd84;
    }
    &.active2 {
      color: #ff7200;
    }
    &.active3 {
      color: #f10000;
    }
  }
}
.process-container {
  display: flex;
  .item {
    width: 50px;
    height: 25px;
    border-top: 1px solid #78767b;
    border-bottom: 1px solid #78767b;
    border-right: 1px solid #78767b;
    box-sizing: border-box;
    &:hover {
      cursor: pointer;
    }
    &:first-child {
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      border-left: 1px solid #78767b;
    }
    &:last-child {
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      //   border-right: 1px solid #78767b;
    }
    &.active {
      border: none;
    }
  }
}
</style>
<style lang="scss">
$colors: (
  0 #ffe5bf,
  1 #ffcd84,
  2 #ffb74f,
  3 #ff9700,
  4 #ff8400,
  5 #ff7200,
  6 #ff6000,
  7 #ff3200,
  8 #f10000,
  9 #e10505
);
.process-popper.el-tooltip__popper.is-light {
  border: none;
  box-shadow: 0 0 25px rgba($color: #9aa3bc, $alpha: 0.35);
  color: #f00;
  @each $i, $color in $colors {
    &.color-#{$i} {
      color: $color;
    }
  }
  .popper__arrow {
    border-top: none;
    &:after {
      border-top-color: #fff;
    }
  }
}
</style>
